<template>
	<view class="page-container job-container">
		<uni-nav-bar dark :fixed="true" status-bar left-icon="left" :border="false" title="我的报名" @clickLeft="back" />
		<view class="pl-3 pr-3 pb-3 pt-1">
			<view class="job_tab">
				<uni-segmented-control :current="currentTab" :values="tabs" @clickItem="onClickItem" />
			</view>
			<!-- 有授权 -->
			<template v-if="user_token">
				<view class="recommend-box">
					<view class="box-content" v-if='tab_content_list && tab_content_list.length'>
						<template v-for="(cell,index) in tab_content_list">
							<delSlideLeft 
								v-if='currentTab == 0'
								:item="cell" 
								:data_transit="{ index: index, item: cell }" 
								@delItem="delItem"
							>
								<view class="recommend-item" :key="index">
									<view class="content" @click="goDetail(cell)">
										<view class="item-title">
										  <view>{{cell.courseTitle}}</view>
										  <text>{{cell.cost}}</text>
										</view>
										<view class="describe">
										  <text>{{cell.classification ? cell.classification : '暂无'}}</text>
										  <text>{{cell.time ? cell.time : '暂无'}}</text>
										</view>
										<!-- <view class="place ellipsis">
											{{cell.briefIntroduction}}
										</view> -->
									</view>
									<view class="d-flex justify-content-end mt-2" v-if="cell.status == 1 && cell.is_check == 2">
										<text class="bg-primary-600 my-btn py-2 px-4" @click="cancelEnroll(cell)">取消报名</text>
									</view>
								</view>
							</delSlideLeft>
							<view v-else class="recommend-item" :key="index" @click="subscribeMessage">
								<view class="content" @click="goDetail(cell)" >
									<view class="item-title">
									  <view>{{cell.courseTitle}}</view>
									  <text>{{cell.cost}}</text>
									</view>
									<view class="describe">
									  <text>{{cell.classification ? cell.classification : '暂无'}}</text>
									  <text>{{cell.time ? cell.time : '暂无'}}</text>
									</view>
									<!-- <view class="place ellipsis">
										{{cell.briefIntroduction}}
									</view> -->
								</view>
							</view>
						</template>
						<uni-load-more :status="loadStatus"></uni-load-more>
					</view>
					<view v-else class="noData">
						暂无数据
					</view>
				</view>
			</template>
			<!-- 尚未授权 -->
			<template v-else>
				<span class="bg-primary-600 fs_16 no-auth-btn" @click="goAuth">请点击登录</span>
			</template>
		</view>
	</view>
</template>

<script>
	import delSlideLeft from'@/components/slideLift/slideLeft.vue';
	export default {
		data() {
			return {
				user_token:"",
				currentTab: 0,
				tabs: [
					'未处理', 
					'已通过', 
					'已结业',
					'已拒绝',
					'培训中', 
					'已报名'
				],
				personsIcon:require("@/static/index/personsIcon.png"),
				tab_content_list:[],
				currentPage:1,
				pageSize:10,
				total:0,
				loadStatus:"more",
				tmplId: ['RE6BOF6eM4EbeCDJsQIvBeF9-TyX2jpG6qJdJO4fDcs', 'y2XBEkkPMBkqyNgPRx1Ncn3ZI7nBLX7NwW-b8lXzJW8']
			}
		},
		components:{
			delSlideLeft
		},
		onLoad(){
			
		},
		onShow(){
			this.user_token = uni.getStorageSync('user_token');
			if(uni.getStorageSync('enrolled_activeTab')){
				this.currentTab = uni.getStorageSync('enrolled_activeTab');
			}else{
				this.currentTab = 0;
			}
			var eObj = {
				currentIndex:this.currentTab
			};
			if(this.user_token){
				this.onClickItem(eObj);
			}
		},
		methods: {
			// 跳转授权页面
			goAuth(){
				uni.navigateTo({
					// 保留当前页面，跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面
					url: "/pages/auth/auth"
				})
			},
			
			// tab切换
			onClickItem(e) {
				console.log('e',e);
				if (this.currentTab !== e.currentIndex) {
					this.currentTab = e.currentIndex
				}
				uni.setStorageSync('enrolled_activeTab',e.currentIndex);
				this.loadStatus = "more";
				this.currentPage = 1;
				this.pageSize = 10;
				this.total = 0;
				this.initEnrolledList(this.currentTab);
			},
			
			// 获取报名列表
			initEnrolledList(type){
				let newType = this.changeType(type);
				this.$api.signUpList({
					status: newType,
					page:this.currentPage,
					pageSize:this.pageSize
				}).then(res=>{
					this.total = res.data.totalCount;
					if (this.currentPage == 1) {
						this.tab_content_list = res.data.rows || [];
						if (this.tab_content_list.length < this.total) {
							this.loadStatus = "more";
						} else {
							this.loadStatus = "no-more";
						}
					} else {
						this.loadStatus = "loading";
						setTimeout(()=>{
							this.tab_content_list = this.tab_content_list.concat(res.data.rows || []);
							if (this.tab_content_list.length < this.total) {
								this.loadStatus = "more";
							} else {
								this.loadStatus = "no-more";
							}
						},1000)
					};
					
					uni.hideNavigationBarLoading();
				});
			},
			
			// 查看详情
			goDetail(item){
				uni.navigateTo({
					// 保留当前页面，跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面
					url: "/pages/enrolled/enrolledDetail?id=" + item.id + '&status=' + item.status,
				})
			},
			//点击删除按钮事件
			delItem(e) {
			  let that = this;
			  // that.tab_content_list.splice(e.data.index, 1);
			  this.cancelEnroll(e.data);
			},
			// 改变报名状态	
			changeType(type) {
				switch(type) {
					case 0: 
						return 0;
					case 1:
						return 1;
					case 2:
						return 3;
					case 3:
						return -1;
					case 4:
						return 2;
					default:
						return 4;
				}
			},
			// 取消报名
			cancelEnroll(item){
				console.log('item', item)
				uni.showModal({
					title: '温馨提示',
					content: '请确认是否取消报名',
					confirmText: '确定',
					cancelText: '取消',
					success: (modal_res) => {
						if (modal_res.confirm) {
							// 调用取消报名的接口
							this.$api.cannelSlignUp(item.item.trainId).then(res=>{
								uni.showToast({
									title: res.msg,
									icon: 'success'
								});
								this.loadStatus = "more";
								this.currentPage = 1;
								this.pageSize = 10;
								this.total = 0;
								this.initEnrolledList(this.currentTab);
							});
						} else if (modal_res.cancel) {
							console.log('关闭');
						}
					}
				});
			},
			back() {
				uni.navigateBack()
			},
			// 判断消息订阅总开关是否打开
			subscribeMessage(flag) {
				uni.getSetting({
					withSubscriptions: true,
					success:(res)=> {
						console.log('res', res);
						if (!res.subscriptionsSetting.mainSwitch) { // 订阅消息的总开关,如果是关着的，引导用户去打开
							this.showPopup = true
						} else { // 如果开着，则继续向下打开弹窗，获取用户授权
							this.messageSubscription()
						}
					},
					fail() {
						this.messageSubscription() // 如果失败，也打开弹窗，获取用户授权
					}
				})
			},
			
			// 订阅申请弹出，只允许点击弹出
			messageSubscription() {
				uni.requestSubscribeMessage({
					tmplIds: this.tmplId,
					success: (res)=> {
						if (res['RE6BOF6eM4EbeCDJsQIvBeF9-TyX2jpG6qJdJO4fDcs'] == 'accept' || res['y2XBEkkPMBkqyNgPRx1Ncn3ZI7nBLX7NwW-b8lXzJW8'] == 'accept') {
							// wx.showToast({
							// 	icon:'none',
							// 	title: '消息订阅成功'
							// })
						}
					},
				})
			},
		},
		
		// 上拉加载
		onReachBottom() {
			this.currentPage++;
			if (this.tab_content_list.length < this.total) {
				this.initEnrolledList(this.currentTab);
			} else {
				uni.hideNavigationBarLoading();
				this.loadStatus = "no-more";
			}
		},
		
		// 下拉刷新
		onPullDownRefresh(){
			this.loadStatus = "more";
			this.currentPage = 1;
			this.pageSize = 10;
			this.total = 0;
			this.initEnrolledList(this.currentTab);
			setTimeout(function () {
				uni.stopPullDownRefresh();  //停止下拉刷新动画
			}, 1000);
		},
		
	}
</script>

<style lang="scss">
page {
  width: 680rpx;
  padding-bottom: 180rpx;
}
.nav {
    width: 100%;
    padding: 58rpx 0 0;
    height: 92rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 34rpx;
    font-weight: bold;
    position: fixed;
    top: var(--window-top);
    z-index: 10;
    background: #FFF;
    .iconfont {
      height: 92rpx;
      line-height: 92rpx;
      // padding-right: 20rpx;
    }
  }
  .recommend-box{
	  margin-top: 30rpx;
	  .recommend-item{
		  padding: 10px;
		  margin-bottom: 20rpx;
		  .header{
			  line-height: 60rpx;
			  
		  }
		  .titleName{
			  font-size: 28rpx;
			  font-weight: 600;
		  }
		  .content{
		  	// padding: 15rpx 20rpx;
		  	margin: auto;
		  	margin-bottom: 10rpx;
		  	
		  	.item-title {
		  	  display: flex;
		  	  justify-content: space-between;
		  	  font-weight: 600;
		  	
		  	  view {
		  	    font-size: 34rpx;
		  	  }
		  	
		  	  text {
		  	    font-size: 30rpx;
		  	    color: $uni-primary;
		  	  }
		  	}
		  	
		  	.describe {
		  	  margin-top: 25rpx;
		  	
		  	  text {
		  	    margin-right: 20rpx;
		  	    font-size: 28rpx;
		  	    // color: $uni-text-color-grey;
		  	    color: #333;
		  	  }
		  	}
		  	.place {
		  		flex: 1;
		  		// color: $uni-text-color-grey;
		  		color: #333;
		  		font-size: 24rpx;
		  		text-align: left;
		  		letter-spacing: 1px;
		  	}
		  	.ellipsis{
		  		text-overflow: -o-ellipsis-lastline;
		  		overflow: hidden;
		  		text-overflow: ellipsis;
		  		display: -webkit-box;
		  		-webkit-line-clamp: 2;
		  		line-clamp: 2;
		  		-webkit-box-orient: vertical;
		  	}
		  	
		  }
	  }
  }
</style>
